<template>
    <div class="overflowDiv">
        <el-space wrap>
            <addHotel hotelCategory="nonStarHotel"></addHotel>
            <template v-for="item in starHotel" :key="item">
                <hotelCard :hotelName="item.hotelName" :hotelId="item.hotelId" :hotelType="item.hotelType"
                    :imgSrc="item.imgSrc"></hotelCard>
            </template>
        </el-space>
    </div>
</template>

<style scoped>
.overflowDiv {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
</style>

<script>
import hotelCard from '../../../components/manager/hotels/hotelCard.vue';
import addHotel from '../../../components/manager/hotels/addHotel.vue';
import { getRequest } from '../../../api/axiosAPI';

export default {
    setup() {

    },

    data() {
        return {
            starHotel: [
                { hotelName: '混元形意太极门', hotelType: '青年旅舍', hotelId: '2', imgSrc: 'https://w.wallhaven.cc/full/x6/wallhaven-x6p3y3.jpg' },
            ],
        }
    },
    methods:{
        getAllNonStarHotels() {
            this.starHotel = [];
            getRequest('http://localhost:8022/hotel?type=nonstar', null)
                .then((response) => {
                    if (response.status === 200) {
                        return response.data;
                    } else {
                        console.log('NetWork Error!');
                    }
                }).then((data) => {
                    let tempArr = data.data;
                    for (let i = 0; i < tempArr.length; i++) {
                        this.starHotel.push({
                            hotelName: tempArr[i].name,
                            hotelType: tempArr[i].type,
                            hotelId: tempArr[i].hid,
                            imgSrc: tempArr[i].imgPath
                        });
                    }
                })
        }
    },
    created(){
        this.getAllNonStarHotels();
    }
}
</script>
